<template>
    <div>
        <div class="staffBg">
            <div class="searchContent flex flexCenter">
                <van-search
                    v-model="keyword"
                    shape="round"
                    show-action
                    background="#4873c1"
                    placeholder="请输入员工姓名"
                    class='searchSty'
                    @search="goSearch"
                    @clear="goSearch"
                >
                    <template #action>
                        <div  class="colorfff" @click="goSearch">搜索</div>
                    </template>
                </van-search>
            </div>
            <van-empty image="search" v-show="staffList.length==0" description="暂无数据" style="padding-top:2rem" />
            <div class="listContent">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    :finished-text="finishedTxt"
                    :immediate-check='false'
                    offset=20
                    @load="goPullup"
                    >
                    <div class="whiteBg list relative mb20" v-for="(item,index) in staffList" :key='index' @click="goCheck(item)">
                        <div class="flex flexBetween wd100 nameType fontbold colorBlue">
                            <div class="flex alignCenter">
                                <img src="../../assets/image/emptyPeople1.png" />
                                <span>{{item.name}}</span>
                            </div>
                            <div>{{item.option_score}}</div>
                        </div>
                        <div class="flex flexBetween fontSize13 mt5 color666 pt10">
                            <div>{{item.gender}} | {{item.education}}</div>
                            <div>{{item.start_date}}（入职时间）</div>
                        </div>
                        <div class="flex flexBetween fontSize13 mt5 color666">
                            <div>{{item.oid_department_name}}</div>
                            <div>{{item.oid_job_position_name}}</div>
                        </div>
                        <div class="fontSize12 mt5 color999" v-if="item.position.length > 0">岗位倾向：<span v-for='(e,index) in item.position' :key="index">{{e}}{{index+1==item.position.length?'':'、'}}</span></div>
                    </div>
                </van-list>
                
            </div>
            <div class="otherBtn fontSize13 color666" @click="getResult">
                <div class="circleSty center flex flexColumn flexCenter alignCenter" >
                    <img src="../../assets/image/emptyPeople.png" />
                    <div class=" fontbold colorBlue"> 我的</div>
                </div>
            </div>
            <!-- <div class="addBtn flex wd100  fontSize16 flexCenter colorfff">
                <div class="sameBtn center colorBlue color333 whiteBg">我的</div>
            </div> -->
        </div>
        <!-- <div v-show="!isWXwork" class="center" style="margin-top:4rem">请在企业微信环境下打开</div> -->
    </div>
    
</template>
<script>
import {Toast,Empty} from 'vant';
import {GetQueryStr} from '@/common/common'
export default {
    name:'result',
    data(){
        return {
            keyword:'',
            page:1,
            staffList:[],
            loading:true,
            finished:false,
            finishedTxt:'没有更多了',
            isWXwork:true
        }
    },
    created(){    
        // var ua = window.navigator.userAgent.toLowerCase();
        // //判断ua和微信浏览器的标识头是否匹配
        // if ((ua.match(/micromessenger/i) == 'micromessenger') && (ua.match(/wxwork/i) == 'wxwork')) {
        //     this.isWXwork=true
        // } else {
        //         Toast('请在企业微信环境下打开')
        //         this.isWXwork=false
        //         return;
        // }
        let token=GetQueryStr('token')
        if(token&&token!==''){
            localStorage.setItem('token',token)
        }
        this.getStaffList()
    },
    methods:{
        getStaffList(){
            let obj={
                name:this.keyword,
                page:this.page
            }
            Toast.loading({
                message: '加载中',
                forbidClick: true,
            })
            console.log('当前页',this.page)
            console.log('this.finished',this.finished)
            this.$apiRequest.getStaffList(obj).then(res=>{
                console.log('员工列表',res)
                this.loading = false
                Toast.clear()
                if(res.code==1){
                    let list=res.data.rows
                    if(list.length===0){
                        this.page==1?this.staffList=[]:''
                        this.page==1?this.finishedTxt='':''
                        this.finished=true
                        return 
                    }
                    if(this.page==1){
                        this.staffList=list
                        this.finishedTxt=''
                        if(list.length<9){
                            this.finished=true
                        }
                    }else{
                        this.staffList=this.staffList.concat(list)
                    }
                }
            })
            
        },
        goSearch(){
          this.page=1
          this.finished=false
          this.loading=true
          this.getStaffList()
        },
        goPullup(){//上拉
            this.page++
            this.getStaffList()
        },
        goCheck(info){
            console.log('info',info)
            this.$router.push({name:'result',query:{id:info.admin_id,fromPage:'list'}})
        },
        getResult(){
            let that=this
            Toast.loading({
                message: '加载中',
            })
            this.$apiRequest.getResultmbti({admin_id:''}).then(res=>{
                console.log('评测结果',res)   
                Toast.clear()
                if(res.code==1){
                    let url=''
                    res.data.status==1?url='result':url='personalityTest' //status: 1-已答题  2-未答题
                    this.$router.push({name:url})
                }else{
                    Toast(res.msg)
                }
            })
        }
    }
}

</script>
<style lang="less" scoped>
.staffBg{
    background-color:rgba(72, 115, 193, 0.1);
    height:100vh;
    .searchContent{
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 1;
        .searchSty{
            width: 100%;
            max-width: 768px;
        }
    }
    .listContent{
        padding-top: 1.4rem;
        padding-bottom: 2rem;
        width: 92%;
        margin: 0 auto;
    }
    .list{
        // width: 96%;
        // margin: 0 auto;
        padding: 0.3rem;
        border-radius: 0.1rem;
        box-shadow: 0 0 0.2rem 0.02rem #ccc;
        .nameType{
            border-bottom: 1px #eee solid;
            padding-bottom: 0.1rem;
        }
        img{
            // width: 0.3rem;
            position: relative;
            top: -0.03rem;
            margin-right: 0.06rem;
        }
    }
    .otherBtn{
        position: fixed;
        right: 0.1rem;
        top: 45%;
        .circleSty{
            width: 1rem;
            height: 1rem;
            // line-height: 1rem;
            border-radius: 50%;
            // background-color: #fff;
            background-color: rgba(0,0,0,0.14);
        }
        img{
            // display: inline-block;
            width: 0.5rem;
            height: 0.5rem;
        }
    }
    .addBtn{
        position: fixed;
        padding: 0 10%;
        // top: 40%;
        // right: 0;
        z-index: 999;
        bottom: 1rem;
        max-width: 7.5rem;
        .sameBtn{
            // background-color:#dce1e9;
            // padding: 0.2rem 1rem;
            border-radius: 0.6rem;
            // border:1px #ddd solid;
            z-index: 99;
            box-shadow: 4px 4px 10px #bbb;
            width: 2.6rem;
            height: 0.9rem;
            line-height: 0.9rem;
            border: 1px #4873c1 solid;
            // text-align: center;
        }
        .activeBtn{
            background: linear-gradient(to left top, orange, rgb(238, 255, 0));
        }
    }
}

</style>